<!-- 商品列表组件封装 -->
<template>
	<view class="goods">
		<view class="goods_item" v-for="(item, index) in goods" :key='index'
		@click="navigator(item.id)">
			<!-- 商品图片, 因为接口返回的图片地址不能使用了 所以用本地图片替换 -->
			<image src="../../static/good.jpg" mode="aspectFit"></image>
			<view class="price">
				<!-- 现价 -->
				<text>￥{{item.sell_price}}</text>
				<!-- 原价 -->
				<text>￥{{item.market_price}}</text>
			</view>
			<!-- 商品标题 -->
			<view class="name">
				{{item.title}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		// 接受父组件传递过来的数据
		props:['goods'],
		name: 'goodlist',
		methods:{
			navigator(id){
				this.$emit('clickGoodDetail', id)
			}
		}
	}
</script>

<style lang="scss">
	// 商品列表样式
	.goods{
		padding: 0 15rpx;
		background-color: #fff;
		display: flex;
		// 多行
		flex-wrap: wrap;
		// 两边间距对其
		justify-content: space-between;
		// 商品列表子元素样式
		.goods_item{
			width: 50%;
			margin: 10rpx 0;
			padding: 15rpx;
			// 缩小盒子里面的内容而不把盒子变大
			box-sizing: border-box;
			image{
				width: 80%;
				height: 150rpx;
				display: block;
				// 水平居中
				margin: 0 auto;
			}
			// text-align: center;
			
			// 价格字体设置
			.price{
				color: $shop-color;
				font-size: 36rpx;
				
				// 原价样式. 获取元素内第二个text元素
				text:nth-child(2){
					color: #999999;
					font-size: 28rpx;
					margin-left: 20rpx;
					// line-through	定义穿过文本下的一条线。
					text-decoration: line-through;
				}
			}
			
			// 商品标题样式
			.name{
				font-size: 30rpx;
				line-height: 50rpx;
				padding-top: 15rpx;
				padding-bottom: 10rpx;
			}
		}
		
	}
</style>
